<template>
    <div style="padding: 20px;">
        <div class="overview-title">
            <el-icon>
                <Grid />
            </el-icon>
            <div>
                数据量总览
            </div>
        </div>
        <el-row justify='center' :gutter="30" class="row-one">
            <el-col :span="6">
                <el-card class="data-card card-1" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <DataLine />
                            </el-icon>
                            <span>直播间数据总量</span>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ cardData['all'] }}</h2>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="data-card card-2" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <ChatDotRound />
                            </el-icon>
                            <span>聊天消息数据量</span>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ cardData['chat'] }}</h2>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="data-card card-3" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>进入消息数据量</span>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ cardData['member'] }}</h2>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row justify='center' :gutter="30" class="row-two">
            <el-col :span="6">
                <el-card class="data-card card-4" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Pointer />
                            </el-icon>
                            <span>点赞消息数据量</span>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ cardData['like'] }}</h2>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="data-card card-5" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Present />
                            </el-icon>
                            <span>礼物消息数据量</span>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ cardData['gift'] }}</h2>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="data-card card-6" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <el-icon>
                                <Star />
                            </el-icon>
                            <span>关注消息数据量</span>
                        </div>
                    </template>
                    <div class="card-content">
                        <h2>{{ cardData['social'] }}</h2>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row justify='center'>
            <el-col :span="12">
                <div id="bar-chart" style="width: 90%; height: 410px;  margin-left: 80px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="pie-chart" style="width: 90%; height: 410px;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps } from 'vue'
import { DataLine, ChatDotRound, UserFilled, Pointer, Present, Star, Grid } from '@element-plus/icons-vue';
import axios from 'axios'
import { ElMessage } from 'element-plus'

import * as echarts from 'echarts';

const { appContext } = getCurrentInstance();
const HOST_URL = appContext.config.globalProperties.$HOST_URL;
const props = defineProps({
    room_id: String,
    analyzed_date: String
});

let cardData = ref({});
const keyMap = {
    "chat": "聊天消息",
    "gift": "礼物消息",
    "like": "点赞消息",
    "member": "进入消息",
    "social": "关注消息"
};

let myPie = null;
let myBar = null;
const initChart = () => {
    myBar = echarts.init(document.getElementById('bar-chart'));
    myPie = echarts.init(document.getElementById('pie-chart'));
};

const fetchCardDateList = async (roomId, roomDate) => {
    try {
        const response = await axios.get(`${HOST_URL}/chart/room/all_list`, { params: { room_id: roomId, create_time_str: roomDate } });
        cardData.value = response.data;
    } catch (error) {
        ElMessage.error('后端请求失败');
        console.error('请求失败:', error);
    }
};

const GetPieChart = () => {
    const source = Object.entries(cardData.value)
        .filter(([key, value]) => key && key !== 'all')
        .map(([key, value]) => ({ value: value, name: keyMap[key] }))
        .sort((a, b) => b.value - a.value);

    var option = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '数据量',
                type: 'pie',
                radius: [30, 150], // 缩小尺寸
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: source
            }
        ]
    };
    option && myPie.setOption(option);
}

const GetBarChart = () => {
    const source = Object.entries(cardData.value)
        .filter(([key, value]) => key && key !== 'all')
        .map(([key, value]) => [keyMap[key], value]);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        dataset: [
            {
                dimensions: ['name', 'score'],
                source: source
            },
            {
                transform: {
                    type: 'sort',
                    config: { dimension: 'score', order: 'desc' }
                }
            }
        ],
        xAxis: {
            type: 'category',
            axisLabel: { interval: 0 }
        },
        yAxis: {},
        series: {
            type: 'bar',
            encode: { x: 'name', y: 'score' },
            datasetIndex: 1
        }
    };
    option && myBar.setOption(option);
}


onMounted(() => {
    initChart();
    fetchCardDateList(props.room_id, props.analyzed_date);
})

// 监听父组件传递的参数变化
watch(() => props.analyzed_date, (newDate) => {
    if (newDate) {
        fetchCardDateList(props.room_id, newDate);
    }
});

// 监听 cardData 的变化，当 cardData.value 更新后调用 GetBarChart
watch(cardData, (newCardData) => {
    if (newCardData) {
        GetBarChart();
        GetPieChart();
    }
});


</script>

<style scoped lang="scss">
.overview-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-bottom: 24px;
    position: relative;

    .el-icon {
        margin-right: 8px;
        font-size: 24px;
    }

    &::after {
        content: '';
        display: block;
        width: 126px;
        height: 1px;
        background-color: rgb(168, 135, 135);
        position: absolute;
        bottom: -20px;
        /* 调整与文字的距离 */
        left: 0;
    }
}

.row-one {
    // 距离顶部距离调大
    margin-top: 50px;
}

.row-two {
    // 距离顶部距离调大
    margin-top: 33px;
}

.card-header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    height: 30px;

    .el-icon {
        margin-right: 8px;
        font-size: 20px;
    }
}

.data-card {
    // 减小宽度
    width: 90%;
    transition: all 0.3s ease;
    border-radius: 12px;

    &:hover {
        transform: translateY(-2px);
    }
}

.card-content {
    text-align: center;

    h2 {
        font-size: 28px;
        margin: 8px 0;
    }
}

.card-1 {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.card-2 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.card-3 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.card-4 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.card-5 {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.card-6 {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}
</style>